<template>
  <div class="app-container">
    <transition name="el-zoom-in-top">
      <el-form v-show="show" ref="form" :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="日志类型">
          <el-input v-model="form.logType" placeholder="日志类型" clearable />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="form.createTime"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-close" plain @click="handleClearSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <el-row class="g-row">
      <template>
        <el-popconfirm title="确定删除吗？" @confirm="handleDelete">
          <el-button slot="reference" icon="el-icon-delete" type="danger" plain>删除全部</el-button>
        </el-popconfirm>
      </template>
      <div style="float: right">
        <el-button icon="el-icon-sort" plain @click="show = !show">查询条件</el-button>
        <el-button icon="el-icon-refresh-left" plain @click="loadList(page.currentPage,page.size)">刷新</el-button>
      </div>
    </el-row>
    <el-row class="g-row">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        @selection-change="selectedChange"
      >
        <el-table-column type="expand">
          <template v-slot="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-scrollbar>
                <el-form-item label="请求方法">
                  <span>{{ props.row.method }}</span>
                </el-form-item>
                <el-form-item label="请求参数">
                  <span>{{ props.row.params }}</span>
                </el-form-item>
                <el-form-item v-if="props.row.exceptionDetail" label="异常详情">
                  <pre v-highlightjs="props.row.exceptionDetail"><code class="java" /></pre>
                </el-form-item>
              </el-scrollbar>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="logType" label="日志类型" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.logType === 'INFO'">{{ scope.row.logType }}</el-tag>
            <el-tag v-else type="danger">{{ scope.row.logType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="操作者" />
        <el-table-column prop="requestIp" label="IP" />
        <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
        <el-table-column prop="description" label="描述" show-tooltip-when-overflow />
        <el-table-column prop="browser" label="浏览器" />
        <el-table-column prop="time" label="请求耗时" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
            <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
            <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="180px" />
      </el-table>
    </el-row>
    <el-row class="g-row">
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>

</template>

<script>
import LogApi from '@/api/system/log.js'

export default {
  name: 'Log',
  data() {
    return {
      loading: true,
      dialog: {
        visible: false,
        title: ''
      },
      show: true,
      page: {
        currentPage: 1,
        size: 10,
        total: 10
      },
      form: {
        logType: '',
        createTime: []
      },
      dialogForm: {
        username: '',
        name: '',
        gender: '',
        birthday: '',
        tel: '',
        address: '',
        status: false,
        email: '',
        roles: []
      },
      tableData: [],
      roles: []
    }
  },
  created() {
    this.loadList(this.page.currentPage, this.page.size)
  },
  methods: {
    loadList(page, size) {
      this.loading = true
      LogApi.listSysLogByPage(JSON.parse(JSON.stringify(this.form)), page, size).then(res => {
        this.loading = false
        this.page.currentPage = res.data.currentPage
        this.page.size = res.data.size
        this.page.total = res.data.total
        this.tableData = res.data.records
      })
    },
    selectedChange(selectedList) {
      this.selectedList = JSON.parse(JSON.stringify(selectedList))
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.loadList(this.page.currentPage, val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loadList(val, this.page.size)
    },
    handleDelete() {
      LogApi.delAllSysLog().then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.loadList(this.page.currentPage, this.page.size)
      })
    },
    handleSearch() {
      this.loadList(this.page.currentPage, this.page.size)
      this.$message.success('查询成功')
    },
    handleClearSearch() {
      this.form = {
        logType: '',
        createTime: []
      }
    }
  }
}
</script>

<style scoped>
.g-row{
  margin-top: 10px;
}
.g-button{
  margin: 0;
  padding: 0;
  width: 40px
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 70px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.demo-table-expand .el-form-item__content {
  font-size: 12px;
}
.java.hljs{
  color: #444;
  background: #ffffff !important;
}
::v-deep .el-dialog__body{
  padding: 0 20px 10px 20px !important;
}
</style>
